import { ElLoading, ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
import { reactive, ref } from 'vue'
import { userAdd, userEdit, userDel, userIsShow, userChangeRole } from '@/api/permission'
import { userList } from '@/hooks/permission/userList'

export function userHandle() {

    const {
        // 获取列表
        loading,  //表格加载中
        selectRoleValue, //选中角色
        roleAllListData, //所有角色列表
        tableData, //表格数据
        pageTotal, //数据总条数
        getData,    //分页信息
        handleCurrentChange, // 页码改变重新请求列表
        resetMenuListData, //重新请求数据,
    } = userList()

    // 是否显示抽屉弹窗
    let drawer = ref(false)

    // 抽屉弹窗操作类型（添加 or 编辑）
    let typeIndex = ref<number>(0)
    enum handleType {
        '新增用户',
        '编辑用户'
    }

    // 表单数据
    let id = ref(0)
    let dataPost = {
        name: '',  //菜单标题
        pwd: '',   //路由名称
        repwd: '', //确认密码
        is_show: true //是否禁用
    }
    let formData = reactive<any>({
        ...dataPost
    })

    // 表单对象
    const formRef = ref<FormInstance>()

    // 验证规则
    const rules = reactive<FormRules<any>>({
        name: [
            { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        pwd: [
            { required: true, message: '密码不能为空', trigger: 'blur' }
        ],
        repwd: [
            { required: true, message: '确认密码不能为空', trigger: 'blur' }
        ]
    })

    // 点击添加用户按钮显示抽屉弹窗
    const showDrawer = (type: number, item?: any) => {
        typeIndex.value = type
        drawer.value = true
        if (type == 0) { //新增菜单

            id.value = 0
            selectRoleValue.value = '请选择'
            // 初始化
            Object.assign(formData, dataPost)

        } else if (type == 1) { //编辑
            id.value = item.id
            selectRoleValue.value = {
                id: item.r_id,
                name: item.role_name,
            }
            // 赋值
            Object.assign(formData, item, {
                pwd: '',
                repwd: '',
                is_show: item.is_show == 0 ? true : false
            })

        } else {
            id.value = 0
            selectRoleValue.value = '请选择'
            Object.assign(formData, dataPost)
        }
    }

    // 右上角关闭抽屉弹窗
    const handleClose = (done: () => void) => {
        ElMessageBox.confirm(
            `是否关闭当前操作?`,
            '温馨提示',
            {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
            .then(() => {
                done()
            })
            .catch(() => {
                // catch error
            })
    }

    // 点击抽屉弹窗底部关闭按钮隐藏弹窗
    const cancelClick = () => {
        drawer.value = false
    }

    // 点击抽屉弹窗底部确认按钮
    const confirmClick = async () => {
        try {
            // 可能会抛出错误的代码
            let confirmRusult = await ElMessageBox.confirm(
                `是否${handleType[typeIndex.value]}?`,
                '温馨提示',
                {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )

            if (confirmRusult != 'confirm') {
                return ElMessage.error('异常操作')
            }

            // 加载中
            const loading = ElLoading.service({
                lock: true,
                text: 'Loading',
                background: 'rgba(0, 0, 0, 0.7)',
            })

            // 添加或者编辑
            let is_show = formData.is_show == true ? 0 : 1
            let postData = {
                ...formData,
                is_show,
                r_id: selectRoleValue.value?.id
            }

            let userAddRusult = reactive<any>({})
            if (typeIndex.value == 0 ) { //添加用户

                userAddRusult = await userAdd('/permission/userAdd', postData)

            } else if (typeIndex.value == 1) { // 编辑把id放到对象里

                postData.id = id.value
                userAddRusult = await userEdit('/permission/userEdit', postData)

            }

            // 操作失败
            if (userAddRusult.status != 0) {
                await loading.close()
                return ElMessage.error(userAddRusult.message)
            }

            // 隐藏弹窗
            drawer.value = false

            ElMessage.success(`${handleType[typeIndex.value]}成功`)

            // 重新请求
            await resetMenuListData()

            // 关闭等待中
            await loading.close()

        } catch (error) {
            // 当错误发生时，执行此块代码
        }

    }

    // 表单提交
    const submitForm = async (formEl: FormInstance | undefined) => {
        if (!formEl) return
        // 表单验证
        let resultFlag = await formEl.validate((valid, fields) => { })
        // 表单验证失败
        if (!resultFlag) {
            return ElMessage.error('表单验证不通过！')
        }
        // 验证成功显示确认弹窗
        confirmClick()
    }

    // 删除菜单
    const delMenu = async (item: any) => {
        try {
            // 可能会抛出错误的代码
            let confirmRusult = await ElMessageBox.confirm(
                `是否删除该用户?`,
                '温馨提示',
                {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )

            if (confirmRusult != 'confirm') {
                return ElMessage.error('异常操作')
            }

            // 加载中
            const loading = ElLoading.service({
                lock: true,
                text: 'Loading',
                background: 'rgba(0, 0, 0, 0.7)',
            })

            // 删除菜单
            let postData = {
                id: item.id
            }
            let delUserRuslt = await userDel('/permission/userDel', postData)

            // 操作失败
            if (delUserRuslt.status != 0) {
                await loading.close()
                return ElMessage.error(delUserRuslt.message)
            }

            // 删除成功
            ElMessage.success(`删除成功`)

            // 重新请求
            await resetMenuListData()

            // 关闭等待中
            await loading.close()


        } catch (error) {
            // 当错误发生时，执行此块代码
        }

    }

    //是否开启
    const isShowChange = async (e: any, item: any) => {
        let postData = {
            id: item.id
        }
        let menuIsShowRuslt = await userIsShow('/permission/userIsShow', postData)
        // 操作失败
        if (menuIsShowRuslt.status != 0) {
            setTimeout(() => {
                item.switch = !e
            }, 500)
            return ElMessage.error(menuIsShowRuslt.message)
        }
        item.is_show = !item.is_show
    }

    // 切换角色
    const selectRoleChange = async(e:any, item:any)=>{
        console.log(e)
        console.log(item)
        // userChangeRole
        try {
            // 可能会抛出错误的代码
            let confirmRusult = await ElMessageBox.confirm(
                `是否切换该角色?`,
                '温馨提示',
                {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )

            if (confirmRusult != 'confirm') {
                return ElMessage.error('异常操作')
            }

             // 加载中
            const loading = ElLoading.service({
                lock: true,
                text: 'Loading',
                background: 'rgba(0, 0, 0, 0.7)',
            })

            // 切换参数
            let postData = {
                id: item.id,
                r_id: e.id
            }

            let userChangeRoleRuslt = await userDel('/permission/userChangeRole', postData)

            // 操作失败
            if (userChangeRoleRuslt.status != 0) {
                await loading.close()
                await resetMenuListData()
                return ElMessage.error(userChangeRoleRuslt.message)
            }

            // 删除成功
            ElMessage.success(userChangeRoleRuslt.message)

            // 重新请求
            await resetMenuListData()

            // 关闭等待中
            await loading.close()

        }catch (error) {
            // 当错误发生时，执行此块代码
            // 重新请求
            await resetMenuListData()
        }

    }

    return {
        // 获取列表
        loading,  //表格加载中
        selectRoleValue, //选中角色
        roleAllListData, //所有角色列表
        tableData, //表格数据
        pageTotal, //数据总条数
        getData,    //分页信息
        handleCurrentChange, // 页码改变重新请求列表

        // 按钮操作
        drawer,    //是否显示抽屉弹窗
        typeIndex, //抽屉弹窗标题下标
        handleType, //抽屉弹窗标题下标对应的标题
        showDrawer, // 点击添加用户按钮显示抽屉弹窗
        handleClose, // 右上角关闭抽屉弹窗
        cancelClick, // 点击抽屉弹窗底部关闭按钮隐藏弹窗
        formData, //表单数据
        formRef, // 表单对象
        rules, //表单规则
        submitForm, //提交表单
        delMenu, //删除菜单
        isShowChange, //是否开启
        selectRoleChange //切换角色
    }
}